<template>
  <div class="page-goods df">
    <div class="navs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navitem"
          :key="item"
          :title="item"
      /></van-sidebar>
    </div>

    <div class="right-container f1">
      <div class="goods-list">
        <div class="goods-item" v-for="item in goodsData" :key="item.id">
          <h3>{{ item.name }}</h3>
          <div class="foods-list">
            <van-card
              v-for="v in item.foods"
              :key="v.id"
              num="2"
              :price="v.price"
              :desc="v.goodsDesc"
              :title="v.name"
              :thumb="v.imgUrl"
            > 
            <template #footer>
                <van-stepper 
                v-model="v.account" 
                :min='0'
                default-value='0'
                theme="round"
                 button-size="22" 
                 disable-input />
           </template>
           
            </van-card>
          
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading: false,
    };
  },
  computed: {
    ...mapGetters("shop", ["navitem"]),
    ...mapState("shop", ["goodsData"]),
  },
  methods: {
    //左侧点击菜单
    handleClick(index) {
      this.activeKey = index;
      //获取nodeList节点
      const goodsNodes = document.querySelectorAll(".goods-item");

      //右侧滚动
      this.bs2.scrollToElement(goodsNodes[this.activeKey], 600);
      //设置loading为true代表左侧点击
      this.loading = true;
    },

    //渲染滚动
    renderScroll() {
      this.$nextTick(() => {
        this.bs1 = new BScroll(".navs", {
          click: true,
          probeType: 3, //3 派发滚动事件
        });
        this.bs2 = new BScroll(".right-container", {
          click: true,
          probeType: 3, //3 派发滚动事件
        });

        //获取nodeList节点
        const goodsNodes = document.querySelectorAll(".goods-item");
        //获取goods-item盒子的高度
        goodsNodes.forEach((el) => {
          this.heightList.push(el.clientHeight);
        });
        //滚动结束
        this.bs2.on("scrollEnd", () => {
          //loading设置为false
          this.loading = false;
        });
        //监听BS2滚动
        this.bs2.on("scroll", ({ y }) => {
          //如果左侧在点击 右侧不需要监听
          if (this.loading) return;
          let Y = Math.abs(y);
          // console.log(Y);
          /* 
              索引0  y>0 && y<1盒子
              索引1  y>1盒子 && y<1+2 盒子
              索引2  y>1+2盒子 && y<1+2+3 盒子
              大于前面盒子的和<前面盒子的和+自己高度
            */
          this.heightList.reduce((total, cur, index) => {
            if (Y > total && Y < total + cur) {
              this.activeKey = index;
            }
            return total + cur;
          }, 0);
        });
      }, 200);
    },
  },
  async created() {
    //发请求
    await this.$store.dispatch("shop/A_getgoods");
    //渲染函数
    this.renderScroll();
  },
};
</script>

<style lang="scss" scoped>
.right-container {
  // background: red;
  width: 100%;
}
.page-goods {
  height: 100%;
  overflow: hidden;
}
h3 {
  color: deeppink;
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
</style>
